<template>
  <view class="settings-container">
    <!-- 状态栏 -->
    <view class="status-bar">

    </view>
    
    <!-- 标题栏 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <image src="/static/arrow-left.png" mode="aspectFit" class="back-icon"></image>
      </view>
      <text class="title">设置</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 设置选项 -->
    <view class="settings-list">
      <view class="settings-group">
        <view class="settings-item" @click="navigateTo('/pages/user-info/user-info')">
          <text class="item-label">个人信息</text>
          <image src="/static/right.png" mode="aspectFit" style="width: 32rpx; height: 32rpx;"></image>
        </view>
        
        <view class="settings-item" @click="toggleNotification" v-if="false">
          <text class="item-label">消息通知</text>
          <switch :checked="settings.notification" color="#881B20" @change="handleSwitchChange('notification', $event)"></switch>
        </view>
        
        <view class="settings-item" @click="toggleDarkMode" v-if="false">
          <text class="item-label">深色模式</text>
          <switch :checked="settings.darkMode" color="#881B20" @change="handleSwitchChange('darkMode', $event)"></switch>
        </view>
      </view>
      
      <view class="settings-group" v-if="false">
        <view class="settings-item" @click="navigateTo('/pages/about/about')">
          <text class="item-label">关于我们</text>
          <image src="/static/right.png" mode="aspectFit" style="width: 32rpx; height: 32rpx;"></image>
        </view>
        
        <view class="settings-item" @click="navigateTo('/pages/privacy/privacy')">
          <text class="item-label">隐私政策</text>
          <image src="/static/right.png" mode="aspectFit" style="width: 32rpx; height: 32rpx;"></image>
        </view>
        
        <view class="settings-item" @click="navigateTo('/pages/terms/terms')">
          <text class="item-label">用户协议</text>
          <image src="/static/right.png" mode="aspectFit" style="width: 32rpx; height: 32rpx;"></image>
        </view>
      </view>
      
      <view class="settings-group">
        <view class="settings-item" @click="clearCache">
          <text class="item-label">清除缓存</text>
          <text class="cache-size">{{ cacheSize }}</text>
        </view>
      </view>
      
      <view class="settings-group">
        <view class="logout-button" @click="logout">
          <text>退出登录</text>
        </view>
      </view>
    </view>
    
    <!-- 版本信息 -->
    <view class="version-info">
      <text>当前版本 v1.0.0</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: {
        notification: true,
        darkMode: false
      },
      cacheSize: '23.5MB'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    toggleNotification() {
      this.settings.notification = !this.settings.notification;
    },
    toggleDarkMode() {
      this.settings.darkMode = !this.settings.darkMode;
    },
    handleSwitchChange(type, event) {
      this.settings[type] = event.detail.value;
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清除中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              this.cacheSize = '0KB';
              uni.showToast({
                title: '清除成功',
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里可以调用登出API
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
            
            // 延迟返回首页
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              });
            }, 1500);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.settings-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 88rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  
  .time {
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
  }
  
  .right-icons {
    display: flex;
    align-items: center;
    
    .signal, .wifi, .battery {
      background-color: #000000;
      margin-left: 12rpx;
    }
    
    .signal {
      width: 36rpx;
      height: 24rpx;
    }
    
    .wifi {
      width: 32rpx;
      height: 24rpx;
    }
    
    .battery {
      width: 48rpx;
      height: 24rpx;
      border-radius: 6rpx;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #ffffff;
  
  .back-button {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    .back-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #000000;
    flex: 1;
    text-align: center;
  }
  .placeholder {
    width: 60rpx;
  }
}
.settings-list {
  margin-top: 20rpx;
  .settings-group {
    margin-bottom: 20rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
    .settings-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 32rpx;
      border-bottom: 1rpx solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
      .item-label {
        font-size: 30rpx;
        color: #333333;
      }
      .item-arrow {
        font-size: 32rpx;
        color: #999999;
      }
      .cache-size {
        font-size: 28rpx;
        color: #999999;
      }
    }
    .logout-button {
      padding: 30rpx 0;
      text-align: center;
      text {
        font-size: 32rpx;
        color: #FF3B30;
      }
    }
  }
}
.version-info {
  margin-top: 40rpx;
  text-align: center;
  padding-bottom: 40rpx;
  text {
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
